<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection" height="calc(100vh - 265px)" full-height="calc(100vh - 116px)" :need-page="false" tool-class="ele-toolbar-form" >
      <!-- 表头工具栏 -->
      <template slot="toolbar">
        <dict-data-search @search="reload" :parentId="parentId" >
          <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit({parentId:parentId,parentName:parentName,parentCode:parentCode})">添加</el-button>
        </dict-data-search>
      </template>
      <!-- 操作列 -->
      <template slot="action" slot-scope="{ row }">
        <el-link type="primary" :underline="false" icon="el-icon-edit"   v-show="row.isSys==1" @click="openEdit(row)" >修改</el-link>
        <el-popconfirm class="ele-action" title="确定要删除此字典项吗？" @confirm="remove(row)" >
          <el-link type="danger" slot="reference" :underline="false" v-show="row.isSys==1" icon="el-icon-delete" >删除</el-link>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <dict-data-edit :visible.sync="showEdit" :data="current" :parentId="parentId" :parentName="parentName" :parentCode="parentCode" @done="reload" />
  </div>
</template>

<script>
  import DictDataSearch from './dict-data-search';
  import DictDataEdit from './dict-data-edit';
  import { Delete,QueryAllChildDictView } from '@/api/systemmanager/dictionarymanager';

  export default {
    name: 'DictData',
    components: { DictDataSearch, DictDataEdit },
    props: {
      // 字典id
      parentId: String,
      // 字典父节点名称
      parentName: String,
      // 字典父节点代码
      parentCode: String,
    },
    data() {
      return {
        // 表格列配置
        columns: [
          { columnKey: 'index', type: 'index', width: 60, align: 'center', showOverflowTooltip: true, label: '序号',},
          { prop: 'name', label: '名称', sortable: 'name', showOverflowTooltip: true,  },
          { prop: 'code', label: '代码', sortable: 'code', showOverflowTooltip: true,  },
          { prop: 'remark', label: '备注', sortable: 'remark', showOverflowTooltip: true, minWidth: 110 },
          { columnKey: 'action', label: '操作', width: 130, align: 'center', resizable: false, slot: 'action', hideInSetting: true, showOverflowTooltip: true }
        ],
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false
      };
    },
    methods: {
      /* 表格数据源 */
      datasource(params) {

        let querywhere ={
          key:'',
          sort:'',
          order:'',
          parentId:this.parentId,
        }
        //关键字
        if(params.where.key){
          querywhere.key = params.where.key;
        }
        //排序列
        if(params.order.sort){
          querywhere.sort = params.order.sort;
        }
        //升序、降序
        if(params.order.order){
          querywhere.order = params.order.order;
        }
        return QueryAllChildDictView(querywhere);
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({where:where});
      },
      /* 显示编辑 */
      openEdit(row) {
        this.current = row;
        this.showEdit = true;
      },
      /* 删除 */
      remove(row) {
        const loading = this.$loading({ lock: true });
        Delete(row.id)
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e.message);
          });
      },
    },
    watch: {
      // 监听字典id变化
      parentId() {
        this.reload();
      }
    }
  };
</script>
